<template>
    <div class="product-list-container"></div>
    <!-- <page-container> -->
    <app-card v-show="cities[0].isShow">
        <template #header> 数据筛选 </template>
        <el-form
            ref="form"
            :model="listParams"
            :disabled="listLoading"
            label-width="70px"
            @submit.prevent="handleQuery"
        >
            <el-form-item label="产品分类">
                <el-select
                    v-model="listParams.cate_id"
                    placeholder="请选择"
                    clearable
                    @change="loadList"
                >
                    <el-option
                        label="全部"
                        :value="0"
                    />
                    <el-option
                        v-for="item in productCates"
                        :key="item.id"
                        :label="`${item.html}${item.cate_name}`"
                        :value="item.id"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="产品名称">
                <el-input
                    v-model="listParams.store_name"
                    placeholder="请输入产品名称关键字"
                    clearable
                    style="width: 300px"
                >
                    <template #append>
                        <!-- <el-button
              icon="el-icon-search"
              @click="loadList"
            /> -->
                        <el-icon><search /></el-icon>
                    </template>
                </el-input>
            </el-form-item>
            <el-form-item label="产品类目">
                <el-radio-group
                    v-model="listParams.type"
                    @change="loadList"
                >
                    <el-radio :label="0"> 全部 </el-radio>
                    <el-radio
                        v-for="item in productTypes"
                        :key="item.type"
                        :label="item.type"
                    >
                        {{ `${item.name}(${item.count})` }}
                    </el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
    </app-card>
    <app-card
        style="margin-top: 20px"
        v-show="cities[1].isShow"
    >
        <template #header>
            <div v-show="cities[2].isShow">
                <!-- icon="el-icon-plus" -->
                <el-button
                    type="primary"
                    @click="$router.push('/product/add_product')"
                >
                    <el-icon><plus /></el-icon>
                    添加产品
                </el-button>
                <el-button
                    v-if="listParams.type === 2"
                    :loading="updateProductsShowLoading"
                    @click="handleUpdateProductsShow"
                >
                    批量上架
                </el-button>
                <el-button
                    v-else
                    :loading="updateProductsUnshowLoading"
                    @click="handleUpdateProductsUnshow"
                >
                    批量下架
                </el-button>
                <!-- icon="el-icon-document" -->
                <el-button
                    @click="handleExportExcel"
                    :loading="exportExcelLoading"
                >
                    <el-icon><download /></el-icon>
                    导出表格
                </el-button>
            </div>
        </template>
        <el-table
            :data="list"
            v-loading="listLoading"
            style="width: 100%"
            @sort-change="handleSortChange"
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="expand">
                <template #default="props">
                    <el-form
                        label-position="left"
                        inline
                        class="demo-table-expand"
                    >
                        <el-form-item label="产品分类">
                            <span>{{ props.row.cate_name }}</span>
                        </el-form-item>
                        <el-form-item label="市场价格">
                            <span>{{ props.row.ot_price }}</span>
                        </el-form-item>
                        <el-form-item label="成本价">
                            <span>{{ props.row.cost }}</span>
                        </el-form-item>
                        <el-form-item label="收藏数量">
                            <span>{{ props.row.collect }}</span>
                        </el-form-item>
                        <el-form-item label="虚拟销量">
                            <span>{{ props.row.ficti }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column
                type="selection"
                width="55"
            />
            <el-table-column
                prop="id"
                label="产品ID"
            />
            <el-table-column
                prop="id"
                label="产品图片"
            >
                <template #default="scope">
                    <el-image
                        style="width: 100px; height: 100px"
                        :src="scope.row.image"
                        :preview-src-list="[scope.row.image]"
                    />
                </template>
            </el-table-column>
            <el-table-column
                prop="store_name"
                label="产品名称"
            />
            <el-table-column
                prop="price"
                label="产品售价"
            />
            <el-table-column
                prop="sales"
                label="销量"
                sortable="custom"
            />
            <el-table-column
                prop="stock"
                label="库存"
            />
            <el-table-column
                prop="sort"
                label="排序"
            />
            <el-table-column
                label="状态"
                width="150"
            >
                <template #default="scope">
                    <el-switch
                        v-model="scope.row.is_show"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        :active-value="1"
                        :inactive-value="0"
                        :loading="scope.row.statusLoading"
                        active-text="上架"
                        inactive-text="下架"
                        @change="handleUpdateStatus(scope.row)"
                    />
                </template>
            </el-table-column>
            <el-table-column
                min-width="120px"
                label="操作"
                fixed="right"
                align="center"
            >
                <template #default="{ row }">
                    <el-button type="text"> 编辑 </el-button>
                    <el-button type="text"> 查看评论 </el-button>
                    <el-popconfirm
                        :title="row.is_del ? '确定恢复产品吗？' : '确定移到回收站吗？'"
                        @confirm="handleDelete(row.id)"
                    >
                        <template #reference>
                            <el-button type="text">
                                {{ row.is_del ? '恢复产品' : '移到回收站' }}
                            </el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <app-pagination
            v-model:page="listParams.page"
            v-model:limit="listParams.limit"
            :list-count="listCount"
            :load-list="loadList"
            :disabled="listLoading"
        />
        <!-- <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        :total="listCount"
        :page-sizes="[2, 4, 6]"
        :disabled="listLoading"
        v-model:currentPage="listParams.page"
        v-model:pageSize="listParams.limit"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      /> -->
    </app-card>
    <!-- </page-container> -->
    <div class="config">
        <p class="config-title">页面组件配置：</p>
        <el-checkbox-group
            class="config-check"
            v-model="checkedCities"
            @change="handleCheckedCitiesChange"
        >
            <el-checkbox
                v-for="city in cities"
                :key="city.value"
                :label="city.value"
                >{{ city.label }}</el-checkbox
            >
        </el-checkbox-group>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
// import * as productApi from '@/api/product'
import { ElMessage } from 'element-plus'
import type { Product, ProductListParams, ProductType, ProductCategory } from '@/api/types/product'
// import { jsonToExcel } from '@/utils/export-to-excel'
import { Search, Plus, Download } from '@element-plus/icons-vue'

const productTypes = ref<ProductType[]>([])
const productCates = ref<ProductCategory[]>([])
const list = ref<Product[]>([])
const listCount = ref(0)
const listLoading = ref(false)
const listParams = reactive<ProductListParams>({
    page: 1,
    limit: 10,
    cate_id: 0,
    type: 0,
    store_name: '',
    sales: 'normal',
})
const selectionItems = ref<Product[]>([])
const updateProductsShowLoading = ref(false)
const updateProductsUnshowLoading = ref(false)
const exportExcelLoading = ref(false)

const cities = ref([
    {
        label: '搜索栏',
        value: '1',
        isShow: true,
    },
    {
        label: '列表',
        value: '2',
        isShow: true,
    },
    {
        label: '按钮区',
        value: '3',
        isShow: true,
    },
])
const checkedCities = ref(['1', '2', '3'])

onMounted(() => {})

const handleSelectionChange = (val: Product[]) => {
    selectionItems.value = val
}

const loadList = async () => {
    // listLoading.value = true
    // const data = await productApi.getProducts(listParams).finally(() => {
    //   listLoading.value = false
    // })
    // data.list.forEach(item => {
    //   item.statusLoading = false
    // })
    // list.value = data.list
    // listCount.value = data.count
}

const handleQuery = () => {
    listParams.page = 1
}

const handleUpdateStatus = async (item: Product) => {
    item.statusLoading = true
    // await productApi.updateProductStatus(item.id, item.is_show).finally(() => {
    //   item.statusLoading = false
    // })
    ElMessage.success(`${item.is_show ? '上架' : '下架'}成功`)
}

const handleDelete = async (id: number) => {
    // await productApi.removeProduct(id)
}

const handleSortChange = ({ prop, order }: { prop: string; order: 'descending' | 'ascending' | null }) => {
    let sales: ProductListParams['sales'] = 'normal'
    switch (order) {
        case 'ascending':
            sales = 'asc'
            break
        case 'descending':
            sales = 'desc'
            break
    }
    listParams.sales = sales
}

const handleUpdateProductsShow = async () => {
    // 批量上架
    if (!selectionItems.value.length) {
        return ElMessage.warning('请选择产品')
    }
    updateProductsShowLoading.value = true
    // await productApi.updateProductsShow(selectionItems.value.map(item => item.id)).finally(() => {
    //   updateProductsShowLoading.value = false
    // })
    ElMessage.success('批量上架成功')
}

const handleUpdateProductsUnshow = async () => {
    // 批量下架
    if (!selectionItems.value.length) {
        return ElMessage.warning('请选择产品')
    }
    updateProductsUnshowLoading.value = true
    // await productApi.updateProductsUnshow(selectionItems.value.map(item => item.id)).finally(() => {
    //   updateProductsUnshowLoading.value = false
    // })
    ElMessage.success('批量下架成功')
}

const handleExportExcel = async () => {
    // 导出表格
    if (!selectionItems.value.length) {
        return ElMessage.warning('请选择产品')
    }
    exportExcelLoading.value = true
    try {
    } catch (err) {
        console.error(err)
    }
    exportExcelLoading.value = false
}

const handleCheckedCitiesChange = (value: string[]) => {
    cities.value.forEach((item) => {
        if (value.indexOf(item.value) > -1) {
            item.isShow = true
        } else {
            item.isShow = false
        }
    })
}
</script>

<style lang="scss" scoped>
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.demo-table-expand {
    font-size: 0;
    :deep(label) {
        width: 90px;
        color: #99a9bf;
    }
    :deep(.el-form-item) {
        margin-right: 0;
        margin-bottom: 0;
        width: 50%;
    }
}

.el-pagination {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}
.product-list-container {
    position: relative;
}

.config {
    position: absolute;
    right: 20px;
    top: 80px;
    width: 300px;
    height: 120px;
    border-radius: 12px;
    border: 1px dashed #aaa;
    background-color: #eee;
    .config-title {
        padding: 4px;
        margin-top: 20px;
        font-size: 20px;
        font-weight: 600;
        text-align: center;
        border-radius: 12px;
    }
    .config-check {
      margin: 20px 0 0 40px;
    }
}
</style>
